<template>
  <div>
 <div class="box">
          <span class="q1" @click="pao">&lt;</span><span class="q2">人气推荐</span>
      </div>
    <div class="box2">
        <ul>
          <li v-for="item  in list" :key="item.id">
            <img :src="item.pic" alt="" />
            <p v-html="item.name"></p>
            <p class="aa">{{item.characteristic}}</p>
            <p class="bb">￥{{item.minPrice}}</p>
          </li>
        </ul>
      </div>
 </div>
</template>

<script>
import { getfenlei1 } from "../utils/api";
export default {
  name: '',
  data() { 
    return {
        list:[]
    }
  },
  created() {
       getfenlei1().then(res=>{
          console.log(res);
          this.list=res
      })
  },
  methods:{
      pao(){
          this.$router.go(-1)
      }
  },
 }
</script>

<style scoped lang='scss'>
.box{
    width: 100%;
    height: 50px;
    // background-color: red;
    line-height: 50px;
   border-bottom: 1px solid #cccc;
    .q1{
        font-size: 20px;
        margin-left: 24px;
    }
     .q2{
         margin-left: 110px;
         font-size: 18px;
     }
}
.box2{
     ul {
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    li {
      width: 46%;
      height: 275px;
    //   background-color: red;
      img {
        width: 100%;
        height: 190px;
      }
      p {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;

        text-overflow: ellipsis;
      }
      .aa{
          font-size: 14px;
          margin-top: 10px;
          color: #cccc;
      }
      .bb{
          font-size: 14px;
          margin-top: 10px;
          color: red;
      }
    }
  }
}
</style>